<template>
  <div class="app-container">
    <div class="filter-container">
      <div><el-button type="primary" plain size="mini" @click="openDialog">添加黑名单</el-button></div>

      <!-- 添加黑名单 -->
      <el-dialog title="添加黑名单" :visible.sync="dialogVisible" width="40%">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="用户ID" prop="userId" required><el-input v-model="form.userId"></el-input></el-form-item>
          <el-form-item label="原因" required prop="desc"><el-input v-model="form.desc"></el-input></el-form-item>
          <el-form-item label="限制范围" required>
            <el-checkbox>提现</el-checkbox>
            <el-checkbox>交易</el-checkbox>
            <el-checkbox>活动-邀请返佣</el-checkbox>
          </el-form-item>
          <el-form-item label="谷歌验证码" required prop="code"><el-input v-model="form.code"></el-input></el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="requesting" @click="handSubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 移除黑名单 -->
      <el-dialog title="移除黑名单" :visible.sync="dialog2Visible" width="30%">
        <el-form ref="form2" :model="form" :rules="rules2" label-width="100px">
          <el-form-item label="原因" prop="desc"><el-input v-model="form.desc" placeholder="原因"></el-input></el-form-item>
          <el-form-item label="谷歌验证码" prop="code"><el-input v-model="form.code" placeholder="谷歌验证码"></el-input></el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog2Visible = false">取 消</el-button>
          <el-button type="primary" :loading="requesting" @click="handleClickRemoveBtn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 黑名单列表 -->
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="blackValue" label="用户ID"></el-table-column>
        <el-table-column prop="userCount" label="注册账号"></el-table-column>
        <el-table-column prop="userCreateTime" label="注册时间" :formatter="formatTime"></el-table-column>
        <el-table-column prop="blackDesc" label="原因"></el-table-column>
        <el-table-column prop="restrictedScope" label="限制范围"></el-table-column>
        <el-table-column prop="createTime" label="添加时间" :formatter="formatTime"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClickRemove(scope.row)" type="text" size="small">移出黑名单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { list, del, add } from '@/api/black';
import { parseTime } from '@/utils/common';
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      total: 0,
      queryParams: {
        pageNumber: 1,
        pageSize: 20
      },
      dialog2Visible: false,
      dialogVisible: false,
      form: {},
      requesting: false,
      rules: {
        userId: [{ required: true, message: '请填写用户ID', trigger: 'blur' }],
        desc: [{ required: true, message: '请填写原因', trigger: 'blur' }],
        code: [{ required: true, message: '请填写google验证码', trigger: 'blur' }],
      },
      rules2:{
        desc: [{ required: true, message: '请填写原因', trigger: 'blur' }],
        code: [{ required: true, message: '请填写google验证码', trigger: 'blur' }],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      list(this.queryParams)
        .then(res => {
          this.tableData = res.result;
          this.total = res.totalSize;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    formatTime(row, column, value) {
      return parseTime(value);
    },
    handleQuery() {
      this.queryParams.pageNumber = 1;
      this.getList();
    },

    handleClickRemove(data) {
      this.form = {};
      this.form.id = data.id;
      this.dialog2Visible = true;
    },
    handleClickRemoveBtn(data) {

      this.$refs['form2'].validate(valid => {
        if (valid) {
          this.$confirm(`是否移出黑名单？`, '移除', {
            type: 'warning',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                instance.confirmButtonLoading = true;
                del(this.form)
                  .then(res => {
                    this.$message({
                      type: 'success',
                      message: res.message
                    });
                    this.getList();
                    this.dialog2Visible = false;
                    instance.confirmButtonLoading = false;
                    done();
                  })
                  .catch(res => {
                    instance.confirmButtonLoading = false;
                  });
              } else {
                done();
              }
            }
          });
        } else {
          return;
        }
      });

    },
    openDialog() {
      this.form = {};
      this.dialogVisible = true;
    },
    handSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if(this.requesting) return ;
          this.requesting = true;

          add(this.form).then(res => {
            this.$message({ type: 'success', message: res.message });
            this.requesting = false;
            this.getList();
            this.dialogVisible = false;
          });
        } else {
          return;
        }
      });



    },

  }
};
</script>

<style></style>
